<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
        }

        html {
            height: 100%;
            background: url(images/bg2.jpeg);
            background-size: 100% 100%;

        }

        ul {
            display: flex;
            /*弹性盒子布局*/
            width: 640px;
            height: 300px;
            margin: 450px auto;

        }

        ul>li {
            border: 2px black solid;
            /*钢琴黑色的琴键*/
            flex: auto;
            /*让琴键跟随钢琴大小*/
            list-style: none;
            background: rgb(245 245 220);
            box-shadow: 0 0 1 5px black;
            /*给琴键设置阴影效果*/
            position: relative;

        }

        ul>li>span {
            display: block;
            width: 40px;
            height: 150px;
            background: rgba(69, 78, 132, 1);
            position: absolute;
            right: -22px;
            z-index: 1;
        }

        div {
            position: absolute;
            width: 800px;
            left: 72%;
            margin-left: -600px;
            font-size: 0;
            top: 0;
            z-index: -1;
            height: 650px;
            overflow: hidden;
        }

        div>img {
            width: 80px;
            /*margin-top: 650px;*/
            /*animation: move 3s;*/
            position: relative;
            top: 650px;
        }

        /*音符从下向上移动*/
        @keyframes move {
            from {
                top: 400px;
                opacity: 1;
            }

            to {
                top: -100px;
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <ul>
        <li><span></span></li>
        <li><span></span></li>
        <li><span></span></li>
        <li><span></span></li>
        <li><span></span></li>
        <li><span></span></li>
        <li><span></span></li>
        <li></li>
    </ul>
    <div>
        <img src="images/do.png" alt="" />
        <img src="images/fa.png" alt="" />
        <img src="images/la.png" alt="" />
        <img src="images/mi.png" alt="" />
        <img src="images/re.png" alt="" />
        <img src="images/si.png" alt="" />
        <img src="images/sol.png" alt="" />
        <img src="images/do.png" alt="" />
    </div>
</body>

</html>
<script>
    list = document.getElementsByTagName('li');
    pic = document.getElementsByTagName('img');
    for (let i = 0; i < list.length; i++) {
        list[i].onclick = function () {
            m = document.createElement('audio');
            m.src = `mp3/${i + 1}.mp3`;
            m.play();
            this.style.boxShadow = 'none'
            _this = this
            pic[i].style.animation = '3s move'
            setTimeout(function () {
                _this.style.boxShadow = "0 0 15px black";
            }, 1000)
            setInterval(function () {
                pic[i].style.animation = ''
            })
        }
    }
</script>